<template>
	<div class="carousel">
		<ul :style="{width:width+'px',transform:'translate3d('+ left +'px,0,0)'}" @touchstart="start" @touchmove="move" @touchend="end" @touchcancel="cancel">
			<li v-for="(item, index) in carousel" :key="index" :style="{width : liWidth + 'px'}"><img :src="item.src" alt=""></li>
		</ul>
    <ol>
      <li v-for="(item,index) in carousel" v-bind:class="{active : item.active}" @touchend="slider(index)"></li>
    </ol>  
	</div>
</template>

<script>
import imgSrc1 from "../../assets/banner.png";

export default {
   	data() {
      return {
  			liWidth : document.documentElement.clientWidth || document.body.clientWidth,
  			left : 0,//移动距离
  			statrX : 0,//开始触摸的位置
  			iNow : 0,//当前滑动距离
        touchstart : 0
      }
   	},
    props : {
      carousel : {
        type : Array,
        default : [
          {
            src : imgSrc1,
            active : true
          }
        ],
      }
    },
   	computed : {
   		width (){
   			return this.liWidth * this.carousel.length; // 总盒子宽度
   		},
   	},
   	methods : {
   		start(event){
  			let touch = event.targetTouches[0];
        this.touchstart = touch.pageX;          // 开始触摸坐标
  			this.statrX = touch.pageX - this.iNow;  // 开始坐标 = 开始触摸坐标 - 当前移动
   		},
		  move(event){
			  let touch = event.targetTouches[0];
   			this.left = touch.pageX - this.statrX;  // left = 移动坐标 - 开始坐标
   			this.iNow = this.left;                  // iNow = left，供下次移动时使用
   		},
   		end(event){
   			if (this.left > 0) {                    // left > 0 则 都为0，防止滑出屏
   				this.left = 0;
   				this.iNow = 0;
   				return;
   			}
   			let dif = this.width + this.left;       // 结束移动位置 < 屏幕宽度，则left/iNow = -（总盒子宽度 - 屏幕宽度）
   			if (dif < this.liWidth) {
   				this.left = -(this.width-this.liWidth);
   				this.iNow = this.left;
   			}

        let carEnd= event.changedTouches[0].pageX;
        if (this.touchstart - carEnd > (this.liWidth/2)) {  // 开始坐标 - 结束坐标 > 屏幕一半则直接滑屏，否则回到原位
          // this.left = ;
          // this.iNow = ;
        }else{
          // this.left = this.left-this.iNow;
        }
   		},
      cancel (event){                           // 事件被意外取消，则全清零
        this.left = 0;
        this.iNow = 0;
      },
      slider (index){                           // 点击分页按钮切换
        for (var i = 0; i < this.carousel.length; i++) {
          this.carousel[i].active = false;
        }
        this.left = -(index * this.liWidth);
        this.carousel[index].active = true;
      }
   	},
   	mounted (){
		const _this = this
        window.onresize = () => {              // 屏幕改变大小时，则更新li宽度
            return (() => {
                window.screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
                _this.liWidth = window.screenWidth
            })()
        }
   	}
}
</script>

<style lang="">
  .carousel{position: relative;}
  .carousel ol{position: absolute; padding: 0; margin:0; text-align: center; left:42%; bottom: 10px; z-index: 9;}
  .carousel ol li{display:inline-block; margin:0 3px;  width: 10px; height:10px; cursor: pointer; border-radius: 50%; border:1px solid #fff;}
  .carousel ol .active{background: #fff;}
  .carousel ul{transition: 0.2s all;} 
	.carousel ul li{float: left;}
	.carousel img{width:100%;}
	.carousel{overflow: hidden;}
</style>
